<template>
  <div class="persinal">
    <!-- 头部 -->
    <div class="header">
      <div class="daohanglan">
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
      </div>
      <div class="photo">
        <van-image round width="6rem" height="6rem" :src="userInfo.userFace" />
        <!-- 姓名 -->
        <p style="text-align: center">{{ userInfo.realname }}</p>
        <!-- 状态 -->
        <p style="text-align: center">{{ userInfo.certificationStatus }}</p>
        <!-- 手机号 -->
        <p style="text-align: center">手机号:{{ userInfo.telephone }}</p>
        <!-- 身份证号 -->
        <p style="text-align: center">身份证号:{{ userInfo.idCard }}</p>
        <!-- 银行卡号 -->
        <p style="text-align: center">银行卡号:{{ userInfo.bankCard }}</p>
        <!-- 身份证正面照 -->
        <p style="text-align: center">身份证正面照:</p>
        <van-image
          width="100"
          height="100"
          :src="userInfo.idcardPhotoPositive"
        />
        <!-- 身份证反面照 -->
        <p style="text-align: center">身份证反面照:</p>
        <van-image
          width="100"
          height="100"
          :src="userInfo.idcardPhotoNegative"
        />
        <!-- 银行卡照片 -->
        <p style="text-align: center">银行卡照片:</p>
        <van-image width="100" height="100" :src="userInfo.bankCardPhoto" />
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="conten"></div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    //获取数据
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入vuex中的mapActions
    ...mapActions("user", ["getUserInfo"]),
    onClickLeft() {
      this.$router.go(-1);
    },
    // 获取员工信息
    queryUser() {
      let data = {
        page: 1,
        pageSize: 2,
      };
      this.getUserInfo(data);
    },
  },
  created() {
    //自动获取员工信息
    this.queryUser();
  },
};
</script>

<style scoped>
.photo .van-image {
  left: 35%;
}
</style>